<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%--session超时, 重新登录 --%>
<%
if(session.getAttribute("username")==null || session.getAttribute("username")==""){
%>
<script type="text/javascript">
<!--
alert("会话超时,请重新登录!");
window.location.href = "index.jsp";
//-->
</script>
<%} %>

<html>
<head>
<title>聊天室</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css"> 
.online{
    height: 300px;
    overflow: scroll;
}

</style> 

<script src="JS/AjaxRequest.js"></script>
<script type="text/javascript">
//获取style样式的css属性,考虑兼容;ie,火狐/谷歌;
function getStyle(parm1,parm2) {
    return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改变的元素代替名;parm2,要改变的属性名
}

window.onload = function(){
	updateUserList();
	updateMsg();
	document.getElementById('contentContainer').onscroll=function(){
		 if(this.scrollTop+this.offsetHeight>=this.scrollHeight){
		    	var content = document.getElementById("content");
		    	content.style.height = parseInt(getStyle(content, "height"))+500+"px";
		    	//this.scrollTop = this.scrollTop+400;
		    }
	}    
}
window.setInterval("updateUserList();",1000);
window.setInterval("updateMsg();",1000);

function updateUserList(){
	var loader1 = new net.AjaxRequest("Dispatcher?action=UpdateOnlineUser",deal_updateUserList,onerror,"POST");
}
function deal_updateUserList(){
	online.innerHTML=this.req.responseText;
}
function updateMsg(){
	var loader1 = new net.AjaxRequest("Dispatcher?action=UpdateMsgAction",deal_updateMsg,onerror,"POST");	
}
function deal_updateMsg(){
	content.innerHTML=this.req.responseText;
}

function onerror(){
	alert("很抱歉，服务器出现错误，当前窗口将关闭！");
	window.opener=null;
	window.close();
}

function send(){	//验证聊天信息并发送
	if(form1.to.value==""){
		alert("请选择聊天对象！");return false;
	}
	if(form1.content1.value==""){
		alert("发送信息不可以为空！");form1.content1.focus();return false;
	}
	var param="from="+form1.from.value+"&face="+form1.face.value+"&color="+form1.color.value+"&to="+form1.to.value+"&content="+	form1.content1.value;
	form1.content1.value = "";	
	//alert("send:" +param);
	var loader=new net.AjaxRequest("Dispatcher?action=SendMsgAction",deal_send,onerror,"POST",param);		  
}
function deal_send(){
	content.innerHTML=this.req.responseText;
}

function chooseTo(to){
	if(to == "${username}"){
		alert("不要自言自语,好好和大家说话哦!");
	}else{
		form1.to.value = to;
	}
}
function Exit(){
	window.location.href="Dispatcher?action=LeaveAction";
	alert("再见");
}
 
</script>
</head>
<body>
<table width="778" height="150" border="0" align="center" cellpadding="0" cellspacing="0" background="images/main_top.jpg">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="778" height="276" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="165" valign="top" bgcolor="#efefef">在线人员列表
    <div id="online"  style="height: 300px;width: 155px; overflow: scroll;  padding:5px" bgcolor="#f6fded"></div></td>
    <td width="613"  height="200px" valign="top" bgcolor="#efefef" style="padding:5px; ">
	<div style="height:290px; width:607.2px;">聊天内容<div id="contentContainer"  style="background: url(images/main_bj.jpg); overflow:scroll;height:300px; width:607.2px;">
	<div id="content"></div></div></div>
	</td>
  </tr>
</table>
<form action="" name="form1" method="post">
<table width="778" height="95" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#D6D3CE" background="images/main_bottom.jpg" style="color:white;">
  <tr>
    <td height="30" align="left">&nbsp;</td>
    <td height="37" align="left"><input name="from" type="hidden" value="${username}">[${username} ]对
      <input name="to" type="text" value="" size="35" readonly="readonly">
表情
<select name="face" class="wenbenkuang">
  <option  value="无表情的">无表情地</option>
  <option value="微笑着" selected>微笑着</option>
  <option value="笑呵呵地">笑呵呵地</option>
  <option value="热情的">热情地</option>
  <option value="温柔的">温柔地</option>
  <option value="红着脸">红着脸</option>
  <option value="幸福的">幸福地</option>
  <option value="嘟着嘴">嘟着嘴</option>
  <option value="热泪盈眶的">热泪盈眶地</option>
  <option value="依依不舍的">依依不舍地</option>
  <option value="得意的">得意地</option>
  <option value="神秘兮兮的">神秘兮兮地</option>
  <option value="恶狠狠的">恶狠狠地</option>
  <option value="大声的">大声地</option>
  <option value="生气的">生气的</option>
  <option value="幸灾乐祸的">幸灾乐祸地</option>
  <option value="同情的">同情地</option>
  <option value="遗憾的">遗憾地</option>
  <option value="正义凛然的">正义凛然地</option>
  <option value="严肃的">严肃地</option>
  <option value="慢条斯理的">慢条斯理地</option>
  <option value="无精打采的">无精打采地</option>
</select>
说：</td>
    <td width="189" align="left"> &nbsp;&nbsp; &nbsp;&nbsp;字体颜色：
      <select name="color" size="1" class="wenbenkuang" id="select">
        <option selected>默认颜色</option>
        <option style="color:#FF0000" value="FF0000">红色热情</option>
        <option style="color:#0000FF" value="0000ff">蓝色开朗</option>
        <option style="color:#ff00ff" value="ff00ff">桃色浪漫</option>
        <option style="color:#009900" value="009900">绿色青春</option>
        <option style="color:#009999" value="009999">青色清爽</option>
        <option style="color:#990099" value="990099">紫色拘谨</option>
        <option style="color:#990000" value="990000">暗夜兴奋</option>
        <option style="color:#000099" value="000099">深蓝忧郁</option>
        <option style="color:#999900" value="999900">卡其制服</option>
        <option style="color:#ff9900" value="ff9900">镏金岁月</option>
        <option style="color:#0099ff" value="0099ff">湖波荡漾</option>
        <option style="color:#9900ff" value="9900ff">发亮蓝紫</option>
        <option style="color:#ff0099" value="ff0099">爱的暗示</option>
        <option style="color:#006600" value="006600">墨绿深沉</option>
        <option style="color:#999999" value="999999">烟雨蒙蒙</option>
      </select></td>
    
  </tr>
  <tr>
    <td width="21" height="30" align="left">&nbsp;</td>
    <td width="549" align="left">   
    <input name="content1" type="text" size="70" onKeyDown="if(event.keyCode==13){send();}">
      <input name="Submit2" type="button" class="btn_grey" value="发送" onClick="send()"></td>
      <td style="text-align: right;width: 153px;display: inline-block;">
      <input name="button_exit" type="button" class="btn_grey" value="退出聊天室" onClick="Exit()"></td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td height="30" align="left">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

